<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page session="true"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>用户注册</title>
<link type="text/css" rel="stylesheet" href="css/customCss/public.css" />
<link type="text/css" rel="stylesheet" href="css/customCss/register.css" />
<link type="text/css" rel="stylesheet" href="css/customCss/validator.css" />

<script type="text/javascript" src="js/customJs/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/customJs/function.js"></script>
<script type="text/javascript" src="js/customJs/jquery.validate.js"></script>
<script type="text/javascript" src="js/customJs/jquery.validate.ext.js"></script>
<script type="text/javascript" src="js/customJs/jquery.validator.messages_zh.js"></script>
<script type="text/javascript" src="js/customJs/jquery.blockUI.js"></script>
</head>
<body>
	<div class="container">
        <div class="member-logo">
            <img src="images/customLogin/logo.png">
        </div>
        <h3 class="member-des">注册狼友文化账号</h3>
        <form method="post" id="registerForm" cssClass="fm-v clearfix" action="${pageContext.request.contextPath}/register?option=submit">
	        <div class="drop">
	            <span>中国(+86)</span><div class="clear"></div>
	            <i class="icon-bg icon-input icon-bg-drop"></i>
	        </div>
	        <div class="input-groups">
	            <div class="input-group">
	                <input name="mobilePhone" id="mobilePhone" type="text" maxlength="11" placeholder="请输入手机号码" />
	                <input name="service" id="service" type="hidden" value="${service}"/>
	                <i class="icon-bg icon-input icon-bg-phone"></i>
	                <div class="input-err input-err-phone">
	                    <span id="mobilePhoneMsg"></span>
	                </div>
	            </div>
	        </div>

	        <div class="input-groups">
	            <div class="input-group clearfix">
	                <input name="verse_regis" id="verse_regis" type="text" placeholder="验证码" style="width:117px;" />
	                <div class="btn btn-validate btn-validate-get btn-validate-pic">
	                    <img src="./captcha.jpg" id="captchaimg" style="cursor: pointer;" onclick="imgClick(this);" />
	                </div>
	                <div class="input-err input-err-pwd">
	                    <span id="verse_regisMsg"></span>
	                </div>
	                <div class="clear"></div>
	            </div>
	        </div>

	        <div class="input-groups">
	            <div class="input-group clearfix">
	                <input name="msgCode" id="msgCode" type="text" placeholder="短信验证码" />
	                <div class="btn btn-validate btn-validate-get" id="getMsgCode">获取短信验证码</div>
	                <input type="hidden" id="flag" value="0"/>
	                <div class="input-err input-err-validate">
	                    <span id="msgCodeMsg"></span>
	                </div>
	            </div>
	        </div>
        
        	<p class="pwd-title">设置密码：</p>
	        <div class="input-groups">
	            <div class="input-group">
	                <input name="pwd" id="pwd" type="password" placeholder="请设置密码" />
	                <i class="icon-bg icon-input icon-bg-lock"></i>
	                <div class="input-err input-err-pwd">
	                    <span id="pwdMsg"></span>
	                </div>
	            </div>
	        </div>
	        <div class="input-groups">
	            <div class="input-group">
	                <input name="repwd" id="repwd" type="password" placeholder="请确认密码" />
	                <i class="icon-bg icon-input icon-bg-lock"></i>
	                <div class="input-err input-err-repwd">
	                    <span id="repwdMsg"></span>
	                </div>
	                <div class="pwd-tip">6-20位字符，建议由字母，数字和符号两种以上组合</div>
	            </div>
	        </div>
	        <div class="button-groups">
	            <button class="register" id="btn_register" type="submit">立即注册</button>
	        </div>
		</form>
		<div class="modal loading-modal">
			<img src="images/customLogin/loading.gif">
		</div>
        <div class="protocol">
            <input type="checkbox" checked="checkedd" /><span>我已阅读并同意</span><a href="javascript:void(0);">《狼友文化用户注册协议》</a>
        </div>
       	<div class="copyright">广州市学习技术有限公司版权所有-备案/许可证编号为：粤ICP备15035998号</div>
    </div>
    
    <script type="text/javascript">
	    function imgClick(obj) {//切换验证码内容
			obj.src = './captcha.jpg?' + (+new Date().getTime());
		}
	    
	    var countdown = -1;
	    function getCode(obj){
	    	if(countdown == 0){
	    		obj.attr('style', 'background: #FFFFFF');
	    		obj.html('获取短信验证码');
	    		$('#flag').val('0');
	    	} else {
	    		if($('#flag').val() == '0'){
	    			var mobileReg = /^0?(13[0-9]|17[078]|15[012356789]|18[0123456789]|14[57])[0-9]{8}$/;
		    		var mobile = $("#mobilePhone").val();
		    		if(mobile == ''){
		    			$("#mobilePhoneMsg").html("<label for='mobilePhone' generated='true' class='errorClass'>请输入手机号码</label>");
		    			return false;
		    		}
		    		if(!mobileReg.test(mobile)){
		    			$("#mobilePhoneMsg").html("<label for='mobilePhone' generated='true' class='errorClass'>手机号码格式错误</label>");
		    			return false;
		    		}
		    		var mobilePhoneMsg = $('#mobilePhoneMsg').children('label').eq('0').html();
		    		if(mobilePhoneMsg == '该手机号已被注册'){
		    			return false;
		    		}
		    		
		    		$.ajax({
		    			type : "post",
						cache : false,
						dataType : "json",
						data : {"mobilePhone":""+mobile+"", "option" : "sendMessage"},
						url : '${pageContext.request.contextPath}/register',
						success : function(data){}
		    		});
	    		}
	    		
	    		$('#flag').val('1');
	    		obj.attr('style', 'background: #f7f7f7');
	    		obj.html('重新发送('+countdown+')');
	    		countdown--;
	    	}
	    	setTimeout(function(){getCode(obj);}, 1000);
	    }
	    
	    $(function(){
	    	jQuery.validator.addMethod("isMobile", function(value, element) {
				var len = value.length;
				var mobile = /^0?(13[0-9]|17[078]|15[012356789]|18[0123456789]|14[57])[0-9]{8}$/;
				return this.optional(element) || (len == 11 && mobile.test(value));
			}, "手机号码格式错误");
	    	
	    	jQuery.validator.addMethod("isRepassword", function(value, element){
	    		var password = $("#pwd").val();
	    		var repassword = $("#repwd").val();
	    		return this.optional(element) || (repassword == password);
	    	});
	    	
	    	$("#registerForm").validate({
	    		rules:{
	    			mobilePhone:{required: true, maxlength: 11, isMobile: true, remote : {type : 'post', url : '${pageContext.request.contextPath}/register?option=checkUser', data : {'mobilePhone' : function(){return $('#mobilePhone').val();}}}},
	    			verse_regis:{required: true, remote : {type : 'post', url : '${pageContext.request.contextPath}/register?option=checkCapt', data : {'verse_regis' : function(){return $('#verse_regis').val();}}}},
	    			msgCode:{required: true, remote : {type : 'post', url : '${pageContext.request.contextPath}/register?option=checkCode', data : {'msgCode' : function(){return $('#msgCode').val();}}}},
	    			pwd:{required: true, maxlength: 20, minlength : 6},
	    			repwd:{required: true, maxlength: 20, minlength : 6, isRepassword : true},
				},
				messages:{
					mobilePhone:{
						required: "请输入手机号码",
						isMobile: "手机号码格式错误",
						maxlength: "手机号码不能超过11个字符",
						remote : $.format("该手机号已被注册")
					},
					verse_regis:{
						required : "请输入验证码",
						remote : $.format("验证码输入不正确")
					},
					msgCode:{
						required:"请输入手机验证码",
						remote : $.format("手机验证码输入不正确")
					},
					pwd:{
						required:"请输入密码",
						maxlength : "密码最长为20位字符",
						minlength : "密码最短为6个字符"
					},
					repwd:{
						required:"请输入确认密码",
						maxlength:"密码最长为20位字符",
						minlength : "密码最短为6个字符",
						isRepassword : "两次密码输入不一致"
					}
				},
				errorPlacement:function(error,element){
					$("#" + element.attr("name") + "Msg").empty();
					error.appendTo($("#" + element.attr("name") + "Msg"));
				}
	    	});
	    	
	    	$('#registerForm').submit(function(){
	    		if($("#registerForm").valid()){
	    			$.blockUI({
		    			message: $('.loading-modal'),
		    			css : {
		    				top: '220px',
		    				border: '0',
		    				background: 'none'
		    			}
		    		});
	    		}
	    	});
	    	
	    	$("#getMsgCode").click("onclick", function(){//发送短信验证码
	    		if($('#flag').val() == '1'){
	    			return false;
	    		}
				countdown = 60;
	    		getCode($(this));
	    	});
	    });
    </script>
</body>
</html>